<!--
 * @Author: your name
 * @Date: 2022-04-28 14:24:42
 * @LastEditTime: 2022-05-07 16:33:15
 * @LastEditors: Xia_cc 978487464@qq.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \二阶段项目\gitcode\html\ui.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>发货信息管理</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
  <link rel="stylesheet" href="../layui/font/iconfont.woff">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #show {
      width: 95%;
      padding: 0 2.5% 2.5% 2.5%;
      background-color: rgb(240, 244, 246);
      position: relative;
    }

    #tubiaofont {
      height: 60px;
      background-color: rgb(240, 244, 246);
    }

    #tubiaofont span {
      display: inline-block;
      height: 60px;
      line-height: 60px;
      color: gray;
    }

    #tabdiv {
      width: 100%;
      background-color: white;
      overflow: hidden;
    }

    #tabdiv>p {
      width: 100%;
      padding: 20px 10px;
      background-color: rgb(236, 239, 241);
    }

    #tabdiv>table {
      width: 100%;
      text-align: center;
    }

    #addbtn {
      margin: 1%;
    }

    tr {
      border: 1px solid gainsboro;
      height: 50px;
    }

    #DIB {
      width: 100px;
      border: 1px solid gray;
      background-color: rgba(1, 1, 1, 0);
      padding: 5px 0;
      margin-top: 10px;
      margin-left: 10px;
      border-radius: 2px;
    }
    #piLiangAndFenYe{
            margin: 10px 0;
            height: 50px;
            position: relative;
        }
    #test1{
            padding: 5px 10px;
            margin-top: 2px;
            float: right;
        }
    #delMuch{
            width: 100px;
            height: 30px;
            border: 1px solid gray;
            background-color: rgba(1, 1, 1, 0);
            padding: 5px 0;
            margin-top: 10px;
            margin-left: 10px;
            border-radius: 2px;
            float: left;
    }
    #fenYe{
            height: 30px;
            border-style: none;
            position: absolute;
            right: 10px;
        }
        #fenYe>div{
            float: right;
        }
        #fenYe .fenyepag{
            width: 90px;
            height: 30px;
            line-height: 26px;
            margin: 7px 5px;
            border-style: none;
        }
        #test1 button{
            width: 40px;
            height: 30px;
            line-height: 26px;
            margin: 0 5px;
            border-style: none;
        }
    #tanchukuang {
      width: 95%;
      padding: 0 2.5% 2.5% 2.5%;
      background-color: rgb(240, 244, 246);
      display: none;
    }

    #tubiaofont {
      height: 60px;
      background-color: rgb(240, 244, 246);
    }

    #tubiaofont span {
      display: inline-block;
      height: 60px;
      line-height: 60px;
      color: gray;
    }

    #popup_box {
      width: 100%;
      background-color: white;
      padding-bottom: 20px;
      overflow: hidden;
    }

    #popup_box>p {
      padding: 14px 0;
      width: 100%;
      padding: 20px 0;
      margin-bottom: 1.5%;
      background-color: rgb(236, 239, 241);
    }

    #popup_box>p>span {
      display: inline-block;
      width: 100px;
      border: 1px solid gray;
      background-color: white;
      padding: 5px 0;
      text-align: center;
      margin-left: 78%;
      border-radius: 2px;
    }

    #popup_box>div {
      width: 90%;
      margin: 0 auto;
      border-bottom: 1px dashed black;
      margin-bottom: 2%;
    }

    #popup_box>div>div {
      width: 100%;
      margin: 2% 0;
      padding-left: 10%;
      box-sizing: border-box;
    }

    #popup_box>div input {
      display: inline-block;
      width: 20%;
      height: 38px;
      box-sizing: border-box;
      border: 1px solid black;
      padding-left: 10px;
    }

    #popup_box>div>div>span {
      display: inline-block;
      width: 10%;
      text-align: right;
      margin-right: 2%;
    }
    #popup_box>div>div>span:nth-of-type(2){
      margin-left: 20%;
    }
    #tijiao {
      margin-left: 43%;
      width: 6%;
      height: 38px;
    }

    #chongzhi {
      border: 1px solid black;
      box-sizing: border-box;
      width: 6%;
      height: 38px;
      background-color: white;
      color: black
    }
/*================== 修改框==================== */
    #xiugaikuang {
      width: 95%;
      padding: 0 2.5% 2.5% 2.5%;
      background-color: rgb(240, 244, 246);
      display: none;
    }

    #xgtubiaofont {
      height: 60px;
      background-color: rgb(240, 244, 246);
    }

    #xgtubiaofont span {
      display: inline-block;
      height: 60px;
      line-height: 60px;
      color: gray;
    }

    #xgpopup_box {
      width: 100%;
      background-color: white;
      padding-bottom: 20px;
      overflow: hidden;
    }

    #xgpopup_box>p {
      padding: 14px 0;
      width: 100%;
      padding: 20px 0;
      margin-bottom: 1.5%;
      background-color: rgb(236, 239, 241);
    }

    #xgpopup_box>p>span {
      display: inline-block;
      width: 100px;
      border: 1px solid gray;
      background-color: white;
      padding: 5px 0;
      text-align: center;
      margin-left: 78%;
      border-radius: 2px;
    }
    #xgpopup_box>div {
      width: 90%;
      margin: 0 auto;
      border-bottom: 1px dashed black;
      margin-bottom: 2%;
    }

    #xgpopup_box>div>div {
      width: 100%;
      margin: 2% 0;
      padding-left: 10%;
      box-sizing: border-box;
    }

    #xgpopup_box>div input {
      display: inline-block;
      width: 20%;
      height: 38px;
      box-sizing: border-box;
      border: 1px solid black;
      padding-left: 10px;
    }

    #xgpopup_box>div>div>span {
      display: inline-block;
      width: 10%;
      text-align: right;
      margin-right: 2%;
    }
    #xgpopup_box>div>div>span:nth-of-type(2){
      margin-left: 20%;
    }
    #xiugai {
      margin-left: 43%;
      width: 6%;
      height: 38px;
    }

    #xgchongzhi {
      border: 1px solid black;
      box-sizing: border-box;
      width: 6%;
      height: 38px;
      background-color: white;
      color: black
    }
    #find{
      size: 30px;
      margin: 1% 7%;
      float: right;
    }
    #findInput{
      height: 38px;
      width: 200px;
      padding:0 10px;
    }
    
    #shuaxin{
        margin: 0 10px;
    }
    .cyan{
        background-color: rgb(0,150,136);
    }
  </style>
</head>

<body>
  <!-- 界面 -->
  <div id="show">
    <div id="tubiaofont">
      <span class="layui-icon layui-icon-home" style="color: blue; font-size: 18px;"></span>
      <span style="font-size: 15px; ">&gt;&gt;</span>
      <span>订单</span>
      <span style="font-size: 15px;">&gt;&gt;</span>
      <span>发货信息管理</span>
    </div>
    <div id="tabdiv">
      <p>发货信息列表</p>
      <table>
        <!-- 表格的总宽度以定，高度以定，根据自己的表格的具体内容进行排版 -->
        <button id="addbtn" class="layui-btn">添加发货信息</button><!-- 按钮的样式 -->
        <span id="find">
              &nbsp;&nbsp;<input id="findInput" type="text" placeholder="请输入你想查找的发货地址"><span id="youWu"></span>
              <button id="shuaxin" class="layui-btn">刷新</button>
        </span>
       <!--  <form action="" class="layui-form dingdan" >
            <select name="DaYin"  lay-verify="" id="yesOrNo" class="selected">
              <option value="alldingdan">全部订单</option>
              <option value="yidayin">已打印</option>
              <option value="weidayin">未打印</option>
            </select>
        </form> -->
        <thead>
          <tr>
            <th><input id="allChick" type="checkbox"></th>
            <th>ID</th>
            <th>发货人</th>
            <th>联系方式</th>
            <th>发货地址</th>
            <th>收货地址</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="userInfor">
        
        </tbody>
      </table>
      <div id="piLiangAndFenYe" class="clear">
        <button id="delMuch">批量删除</button>
        <div id="fenYe" class="clear">
            <div>
                <button id="pagUp" class="fenyepag">下一页</button>
            </div>
            <div id="test1"></div><!-- 生成分页 -->
            <div>
                <button id="pagDow" class="fenyepag">上一页</button>
            </div>
        </div>
    </div>
    </div>
  </div>
  <!-- 添加数据界面 -->
  <div id="tanchukuang">

    <div id="tubiaofont">
      <span class="layui-icon layui-icon-home" style="color: blue; font-size: 18px;"></span>
      <span style="font-size: 15px; ">&gt;&gt;</span>
      <span>订单</span>
      <span style="font-size: 15px;">&gt;&gt;</span>
      <span>发货信息管理</span>
      <span style="font-size: 15px; ">&gt;&gt;</span>
      <span>添加发货信息</span>
    </div>
    <div id="popup_box">
      <p >添加发货信息 <span id="backBut">返回列表</span> </p>

      <!-- 输入框，我只做两个作为横向的排版，后面的根据自己的内容在后面添加 -->
      <div>
        <div>
           <span>ID</span><input type="text" name="" id="iD">
           <span>发货人</span><input type="text" name="" id="fahuoren">
        </div>
        <div>
          
          <span>联系方式</span><input type="text" name="" id="lianxifangshi">
          <span>发货地址</span><input type="text" name="" id="fahuodizhi">
        </div>
        <div>
          
          <span>收货地址</span><input type="text" name="" id="shouhuodizi">
        </div>
      </div>
      <button id="tijiao" class="layui-btn layui-btn-sm">提交</button>
      <button id="chongzhi" class="layui-btn layui-btn-sm" style="background-color: white; color: black;">重置</button>
    </div>
  </div>
  <!-- 修改数据页面 -->
  <div id="xiugaikuang">
    <div id="xgtubiaofont">
      <span class="layui-icon layui-icon-home" style="color: blue; font-size: 18px;"></span>
      <span style="font-size: 15px; ">&gt;&gt;</span>
      <span>订单</span>
      <span style="font-size: 15px;">&gt;&gt;</span>
      <span>发货信息管理</span>
      <span style="font-size: 15px; ">&gt;&gt;</span>
      <span>修改发货信息</span>
    </div>
    <div id="xgpopup_box">
      <p >修改发货信息 <span id="xgbackBut">返回列表</span> </p>
      <!-- 输入框，我只做两个作为横向的排版，后面的根据自己的内容在后面添加 -->
      <div>
        <!-- <div>
           <span>ID</span><input type="text" name="" id="xgiD">
        </div> -->
        <div>
          <span>发货人</span><input type="text" name="" id="xgfahuoren">
          <span>联系方式</span><input type="text" name="" id="xglianxifangshi">
        </div>
        <div>
          <span>发货地址</span><input type="text" name="" id="xgfahuodizhi">
          <span>收货地址</span><input type="text" name="" id="xgshouhuodizi">
        </div>
      </div>
      <button id="xiugai" class="layui-btn layui-btn-sm">修改</button>
      <button id="xgchongzhi" class="layui-btn layui-btn-sm" style="background-color: white; color: black;">重置</button>
    </div>
  </div>
  
  <script src="../js/jQuery.3.6.0-uncompress.js"></script>
  <script src="../layui/layui.js"></script>
  <script src="../js/database.js"></script>
  <script src="../js/fahuoxingxiguanli.js"></script>
</body>

</html>